<script lang="ts" setup>
import { ref, reactive, defineEmits } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message, Descriptions, Image } from 'ant-design-vue';
import { Page } from '@vben/common-ui';

import type { VxeGridProps } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getPurchaseDetailList } from '#/api/purchase';

const emit = defineEmits(['fetch-data']);
const data = ref();
const base_data = ref({
  address: '',
  caigou_id: '',
  purchase_name: '',
  purchase_time: '',
  purchase_id: '',
  supply_name: '',
  supply_id: '',
  contact: '',
  tel: '',
});

const [Modal, modalApi] = useVbenModal({
  destroyOnClose: true,
  class: 'w-[98%] max-h-[90vh] top-[10vh] min-top-[5vh]',
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    // message.info('onConfirm');
    emit('fetch-data');
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
    }
  },
});

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
  temp_imgs: string[];
  template_images: string[];
}

const gridOptions: VxeGridProps<RowType> = {
  size: 'mini',
  pagerConfig: {
    enabled: false,
  },
  cellStyle({ column }) {
    if (column.field === 'dead_line') {
      return {
        color: 'red',
      };
    }
  },
  columns: [
    { title: '序号', type: 'seq', width: 30 },
    { field: 'time_category_info', title: '时间分类', width: 100 },
    { field: 'batch_name', title: '订单属性', width: 50 },
    { field: 'template_no', title: '成品简码', width: 85 },
    { field: 'material_name', title: '面料名称', width: 155 },
    { field: 'material_color', title: '颜色', width: 40 },
    {
      field: 'temp_imgs',
      title: '物料图',
      width: 55,
      slots: { default: 'temp_imgs' },
    },
    { field: 'material_attr', title: '成分', width: 135 },
    { field: 'cloth_width', title: '门幅', width: 40 },
    { field: 'gram_weight', title: '克重', width: 60 },
    { field: 'confirm_num', title: '数量', width: 60 },
    { field: 'unit', title: '单位', width: 35 },
    { field: 'price', title: '单价', width: 50 },
    { field: 'total_price', title: '金额', width: 55 },
    { field: 'dead_line', title: '货期', width: 70 },
    { field: 'remark', title: '备注',width: 80 },
    { field: 'material_grade', title: '面料等级', width: 100 },
    { field: 'no_use_rate', title: '缩率', width: 60 },
    { field: 'factory_SupplyNa', title: '外发工厂', width: 50 },
    { field: 'category_info', title: '货品分类', },
    { field: 'grade_category', title: '等级分类', width: 60 },
    { field: 'template_cost', title: '加工费', width: 50 },
    { field: 'sale_price', title: '零售价', width: 60 },
    { field: 'color_order_quantity', title: '下单件数', width: 50 },
    {
      field: 'template_images',
      title: '成品图',
      width: 55,
      slots: { default: 'template_imgs' },
    },
    { field: 'remark_second', title: '备注2', width: 60 },
    { field: 'single_piece', title: '单件用量', width: 55 },
  ],
  exportConfig: {},
  minHeight: '350px',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({}) => {
        const res = await getPurchaseDetailList({
          purchase_id: data.value.info.purchase_id,
        });
        base_data.value = { ...res.base_data };
        return res.bom_list;
      },
    },
    sort: true,
  },
  showOverflow: false,
  sortConfig: {
    defaultSort: { field: 'category', order: 'desc' },
    remote: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});
</script>
<template>
  <Modal title="物料采购单">
    <!-- <div class="flex-col-center">外部传递数据： {{ data }}</div> -->
    <div class="w-[70%]">
    <Descriptions
      :column="3"
      bordered
      size="small"
      :label-style="{ width: '120px' }"
      :content-style="{ flex: 1 }"
    >
      <Descriptions.Item label="手工单号">
        <span style="color: red">{{ data.info.purchase_sn }}</span>
      </Descriptions.Item>
      <Descriptions.Item label="下单人">{{
        base_data.purchase_name
      }}</Descriptions.Item>
      <Descriptions.Item label="采购日期">{{
        base_data.purchase_time
      }}</Descriptions.Item>
      <Descriptions.Item label="供应商">{{
        base_data.supply_name
      }}</Descriptions.Item>
      <Descriptions.Item label="联系人">{{
        base_data.contact
      }}</Descriptions.Item>
      <Descriptions.Item label="联系方式">{{
        base_data.tel
      }}</Descriptions.Item>
    </Descriptions>
    </div>
    <Grid>
      <template #temp_imgs="{ row }">
        <Image :src="row.temp_imgs[0]" fit="fill" width="25px" />
      </template>
      <template #template_imgs="{ row }">
        <Image :src="row.template_images[0]" fit="fill" width="25px" />
      </template>
    </Grid>
    <div class="text-sm">
      <div>说明：</div>
      <div>1.最终金额按实际发货结算。</div>
      <div>
        2.供方如不能满足订单要求应在接订单一个工作日内书面告知，否则供方应按照订单要求供货，并承担因延迟交货产生的相关责任。
      </div>
      <div>3.供方应保证所供货品符合产品技术标准及质量标准：按国家标准执行。</div>
      <div>
        4.发货方式与发货地点应与订货方提前沟通，未按要求造成货品损失的，供货方应承担相应责任。
      </div>
    </div>
  </Modal>
</template>
<style scoped>
.h-full {
  height: unset;
}
</style>
